<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<ul>
			<li>111</li>
			<li>222</li>
			<li class="gg">333</li>
			<li>444</li>
			<li>555</li>
		</ul>
		
		<script type="text/javascript">
			var $aa=$("<li>666</li>");
			var $bb=$("<li>777</li>");
			var $cc=$("<i>Hello</i>");
			var $dd=$("<i>Good</i>");
			var $ee=$("<li>888</li>");
			var $ff=$("<li>999</li>");
			var $gg=$("<li>oooooo</li>");
			// append()
			// 在ul最后面添加$aa
			$("ul").append($aa);
			
			// appendTo(selector)
			// 把$bb添加到ul的最后面
			$bb.appendTo("ul");
			
			// prepend()
			// 在第4个li的内容前面加入$cc
			$("ul li:eq(3)").prepend($cc);
			
			// prependTo(selector)
			$dd.prependTo("ul li:eq(0)");
		
			//after
			// 在.gg的后面加入$ee
			$(".gg").after($ee);
		
			//before
			// 在第1个li的前面加入$gg
			$("ul li:eq(0)").before($ff);
			
			//insertAfter(selector)
			//将$gg添加到最后一个li的后面
			$gg.insertAfter("ul li:last");
		</script>
	</body>
</html>
